<template>
  <!-- <div>个人主页</div> -->
  <div class="middle_box">
    <div class="head_icon">
      <el-image :src="img" fit="cover"></el-image>
    </div>
    <div class="mask"></div>
    <div
      class="main_item"
      v-for=" item in userInfoList "
      :key="item"
      :data-item="item.key"
      :data-value="item.value"
      @click="handleEdit"
    >
      <span class="head_text">{{ item.key }}</span>
      <div class="item_line">
        <div class="input_list">
          <input v-if=" item.key !== '密码' " :value="item.value" type="text" disabled="true" />
          <input v-else :value="item.value" type="password" disabled="true" />
        </div>
        <div class="edit_box">
          <el-button>编辑</el-button>
        </div>
      </div>
    </div>
  </div>

  <EditDialog
    :dialogInfo="dialogInfo"
    :updatePasswordTypeList="updatePasswordTypeList"
    @closeDialog="dialogInfo.dialogVisible = false"
    @submitData="changeValue"
  />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getUserInfoApi, putUserUpdateApi } from '@/apis'
import img from '@/assets/images/hero (1) 1@1x.png'
import EditDialog from '../components/EditDialog.vue'

const userStore = useUserStore()

const userInfoList = ref([
  { key: '用户名', value: '法兰西' },
  { key: '手机号', value: '19955494788' },
  { key: '邮箱', value: '2320762337@qq.com' },
  { key: '密码', value: '4854789' },
  { key: '微信', value: '未绑定' },
  { key: '飞书', value: '未绑定' }
])

const dialogInfo = reactive({
  dialogVisible: false,
  dialogTitle: '',
  dialogValue: ''
})

const updatePasswordTypeList = reactive([])

// const dialogVisible = ref(false)
// const dialogValue = ref('')
// const dialogTitle = ref('')

// 确认点击的"编辑"选项
const handleEdit = (event) => {
  const target = event.target
  console.log(target)

  // 检查是否点击了 .list-item
  if (target.closest('.main_item')) {
    const listItem = target.closest('.main_item')
    const item = listItem.getAttribute('data-item')

    if (item === '密码') {
      console.log(updatePasswordTypeList)
      dialogInfo.dialogTitle = item
      dialogInfo.dialogVisible = true
    } else {
      dialogInfo.dialogValue = listItem.getAttribute('data-value')
      dialogInfo.dialogTitle = item
      dialogInfo.dialogVisible = true
    }
  }
}

// 英文转中文
const E_to_C = (key) => {
  switch (key) {
    case 'username':
      return '用户名'
    case 'phone':
      return '手机号'
    case 'email':
      return '邮箱'
    case 'password':
      return '密码'
    case 'wechat':
      return '微信'
    case 'flyingbook':
      return '飞书'
    default:
      return ''
  }
}

// 中文转英文
const C_to_E = (key) => {
  switch (key) {
    case '用户名':
      return 'username'
    case '手机号':
      return 'phone'
    case '邮箱':
      return 'email'
    case '密码':
      return 'password'
    case '微信':
      return 'wechat'
    case '飞书':
      return 'flyingbook'
    default:
      return ''
  }
}

// 获取登录用户信息
const getUserInfo = async () => {
  const username = userStore.getUser().username
  const { data, message } = await getUserInfoApi({ username })

  // 将后端获取过来的数据进行提取修改
  const newData = Object.keys(data).map((item) => {
    if (item !== 'id') {
      console.log('合并:', item)

      return {
        key: E_to_C(item),
        value: data[item] || '未绑定'
      }
    }
  })
  userInfoList.value = newData.slice(1, newData.length)

  // 消息通知
  ElNotification({
    title: '用户信息',
    message: message,
    type: 'success'
  })
  console.log('获取到的登录信息:', data)
}

// 编辑确认事件
const changeValue = async (val) => {
  console.log(val, userInfoList.value)

  // 先把获取过来的数据进行修改
  userInfoList.value.map((item) => {
    console.log(item)

    if (item.key === val.key) {
      item.value = val.value
    }
  })

  // 进行字段类型转换
  const key = C_to_E(val.key)
  const data = JSON.stringify(new Object({ [key]: val.value }))
  const username = userStore.getUser().username
  const { message } = await putUserUpdateApi({ username }, data)

  // 修改信息后 将信息重新存储到-store-仓库中
  if (key === 'username') {
    userStore.setUser(userInfoList.value[0].value, userStore.user.password, userStore.user.token)
  }

  // 消息通知
  ElNotification({
    title: '信息修改',
    message: message,
    type: 'success'
  })

  dialogInfo.dialogVisible = false
}

const setPasswordType = () => {
  userInfoList.value.map((item) => {
    if (item.key === '手机号') {
      updatePasswordTypeList.push({ key: '手机验证', value: item.value })
    } else if (item.key === '邮箱') {
      updatePasswordTypeList.push({ key: '邮箱验证', value: item.value })
    } else if (item.key === '密码') {
      updatePasswordTypeList.push({ key: '密码验证', value: item.value })
    }
  })
}

onMounted(() => {
  setPasswordType()
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.middle_box {
  padding-bottom: 48px;
  position: relative;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 640px;

  .head_icon {
    width: 150px;
    height: 150px;
    border-radius: 180px;
    overflow: hidden;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }

  .mask {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 180px;
    overflow: hidden;
    background-color: #000;
    opacity: 0;
    z-index: 999;
  }

  .mask:hover {
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
  }

  .main_item {
    margin-top: 32px;
    width: 100%;

    .head_text {
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 1px;
      color: #2f2e3f;
    }

    .item_line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      border-bottom: 1px solid #e3e5e8;
      padding-bottom: 16px;

      .input_list {
        input {
          font-size: 18px;
          width: 210px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          outline: none;
          background: none;
          border-style: none;
        }
      }

      .edit_box {
        margin-top: -36px;
        color: #1c2433;
      }
    }
  }
}
</style>
